<template>
  <div class="container">
    <div class="input">
      <textarea ref="long_text" v-model="messageText" />
    </div>
    <div class="button">
      <el-button :disabled="isThinking" @click="handleSend">
        {{ isThinking ? "思考中" : "发送" }}
      </el-button>
    </div>
    <div class="message">
      <div v-for="(command, index) in commands" :key="index">
        <DynamicComponent v-if="command" :command="command.command" :param="command.param" />
        <span v-else>无效命令</span>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref } from "vue";
import useApiPipe from "@/core/apiStore";
import { parseCommand } from "./commandParser";
import { chain } from "lodash";
import { DynamicComponent } from "./DynamicComponent";

const apiPipe = useApiPipe();

const isThinking = ref(false);
const messageText = ref("");
const commands = ref([]);

const handleSend = async () => {
  if (!messageText.value.trim()) return;
  commands.value.push({
    command: "Markdown",
    param: messageText.value
  });

  isThinking.value = true;
  console.log("apiPipe-log", apiPipe);
  const { messages } = await apiPipe.chat({ data: messageText.value });
  console.log("parse-command:", parseCommand(messages[0]));
  chain(messages)
    .map(parseCommand)
    .each(command => commands.value.push(command))
    .value();
  isThinking.value = false;
  // 这里可以添加实际的发送逻辑
  // 发送完成后需要重置 isThinking.value = false
};
</script>

<style scoped lang="scss">
.container {
  width: 100%;
  padding: 1rem;
  display: flex;
  flex-direction: column;
  gap: 1rem;
  box-sizing: border-box;

  .input {
    textarea {
      width: 100%;
      height: 100px;
      padding: 0.5rem;
      border-radius: 4px;
      border: 1px solid #dcdfe6;
      resize: vertical;
    }
  }

  .button {
    display: flex;
    justify-content: flex-end;

    :deep(.el-button) {
      padding: 8px 16px;
      transition: all 0.3s;
    }
  }
}
</style>
